<template>
  <a-modal
    v-model:visible="visible"
    :mask-closable="false"
    :unmount-on-close="true"
    :align-center="false"
    :modal-class="'add-edit-modal'"
    :top="'55px'"
    @cancel="handleCancel"
  >
    <template #title>
      <div class="modal-title-box">
        <div class="left">{{ props.title }}</div>
      </div>
    </template>
    <div class="main-box">
      <a-tabs v-model="active" :class="screenClass">
        <a-tab-pane v-for="item in tabs" :key="item.key" :title="item.title">
          <query-page
            v-model:selectedKeys="selectedKeys"
            v-model:is-fullscreen="isFullscreen"
            :form-component-config="formComponent"
            :form-render-config="tableObjPL.renderConfig"
            :form-render-keys="tableObjPL.formRenderKeys"
            :table-render-config="tableObjPL.columns"
            :table-render-keys="tableObjPL.renderKeys"
            :loading="isLoading"
            :data="renderData"
            :total="100"
            :row-selection-type="'checkbox'"
            @selection-change="selectionChange"
            @query-data="getData"
          >
            <template #container-side>
              <a-space>
                <a-button type="primary">添加</a-button>
              </a-space>
            </template>
          </query-page>
        </a-tab-pane>
      </a-tabs>
    </div>
    <template #footer>
      <div class="modal-footer-box">
        <a-button type="outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleBeforeOk">确定</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import useFullScreen from '@/common/hooks/fullScreen';
  import queryPage from '@/common/components/query-page/index.vue';
  import { sleep } from '@/utils/tools';
  import { formComponent, tabs, tableObjPL } from './select-plan-config';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
  });
  const isLoading = ref(true);
  const selectedKeys = ref([]);
  const { isFullscreen, screenClass } = useFullScreen();
  const emit = defineEmits(['modaClose']);
  const visible = ref(true);
  const active = ref('1');
  const renderData = ref<any[]>([]);
  const getData = async () => {
    renderData.value = [];
    isLoading.value = true;
    await sleep(2000);
    const data = reactive([
      {
        key: '1',
        name: 'Jane Doe',
        name2: 23000,
        name3: '32 Park Road, London',
        name4: 'jane.doe@example.com',
      },
      {
        key: '2',
        name: 'Alisa Ross',
        name2: 25000,
        name3: '35 Park Road, London',
        name4: 'alisa.ross@example.com',
      },
      {
        key: '3',
        name: 'Kevin Sandra',
        name2: 22000,
        name3: '31 Park Road, London',
        name4: 'kevin.sandra@example.com',
      },
      {
        key: '4',
        name: 'Ed Hellen',
        name2: 17000,
        name3: '42 Park Road, London',
        name4: 'ed.hellen@example.com',
      },
      {
        key: '5',
        name: 'William Smith',
        name2: 27000,
        name3: '62 Park Road, London',
        name4: 'william.smith@example.com',
      },
    ]);
    renderData.value = data;
    isLoading.value = false;
  };
  getData();
  const handleCancel = () => {
    emit('modaClose');
  };
  const selectionChange = (val: string[]) => {
    console.log('selectedKeys', val);
  };
  const handleBeforeOk = () => {
    emit('modaClose');
  };
</script>

<style lang="less" scoped>
  .main-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #fff;

    .steps-box {
      padding: 16px 24px 0 16px;
    }

    .content-box {
      height: calc(100vh - 280px);
      overflow-y: scroll;
    }

    .btn-box {
      padding: 16px 24px;
      text-align: right;
      border-top: 1px solid #eee;

      button {
        margin-left: 8px;
      }
    }

    :deep(.arco-steps-mode-navigation .arco-steps-item-active::after) {
      display: none;
    }
  }
</style>

<style lang="less">
  //.add-edit-modal {
  //  position: absolute;
  //  right: 0;
  //  display: flex !important;
  //  flex-direction: column;
  //  width: 90% !important;
  //  height: calc(100vh - 55px);
  //  background: #fff;
  //
  //  .arco-modal-header {
  //    .arco-modal-title {
  //      .modal-title-box {
  //        width: 100%;
  //        text-align: left;
  //
  //        .left {
  //          color: #1e2228;
  //          font-weight: 400;
  //          font-size: 16px;
  //          line-height: 24px;
  //        }
  //      }
  //    }
  //  }
  //
  //  .arco-modal-body {
  //    height: calc(100% - 108px);
  //    padding: 16px 24px;
  //  }
  //
  //  .arco-modal-footer {
  //    padding: 10px 24px;
  //
  //    button {
  //      margin-left: 8px;
  //      padding: 5px 16px;
  //      font-size: 14px;
  //      line-height: 22px;
  //      border-radius: 4px;
  //    }
  //  }
  //}
</style>
./select-plan-config
